<!-- 邀请好友绑定 -->
<template>
    <div class="page">
        <div class="intro-wrapper" :class="{'whole-height': status == 2}">
            <div class="issue-order-wrapper">
                <div class="content">
                    <h3>您的令牌将会出售给其他矿工<br/>并且您会获得相应的USDT</h3>
                    <h2>可出售令牌：{{idleNum}}块</h2>
                    <div class="input-area">
                        <strong>出售数量</strong><input type="number" min="1" v-model="sellNum" /><span>块</span>
                    </div>
                    <div class="input-area">
                        <strong>出售单价</strong><input type="number" min="40" v-model="sellPrice" /><span>USDT</span>
                    </div>
                    <p><span>*</span>出售单价不可低于<span> {{ minPrice }} </span>USDT</p>
                    <h4>本订单预计获得</h4>
                    <h1><span>+{{Number(sellNum * sellPrice).toFixed(2)}}</span> USDT</h1>
                </div>
                <div class="warm-notice">
                    <p><span>*</span>发布的订单根据单价数额优先排列，请酌情定价</p>
                    <p>出售令牌订单每日可发布3个订单</p>
                    <p>并且总共只能存在3个订单</p>
                </div>
            </div>
        </div>
        <div @touchmove.prevent class="application-wrapper" v-if="status == 1">
            <p @click="confirmToSubmit">提交订单</p>
        </div>
        <div class="mask" v-show="showMask" @click="closeMask($event)" @touchmove.prevent>
            <div ref="maskContent">
                <div class="general-height pay-password" v-if="showPay">
                    <h3 class="title">请输入支付密码验证身份</h3>
                    <div class="password-wrapper">
                        <span><strong v-if="password.num1 >= 0"></strong></span>
                        <span><strong v-if="password.num2 >= 0"></strong></span>
                        <span><strong v-if="password.num3 >= 0"></strong></span>
                        <span><strong v-if="password.num4 >= 0"></strong></span>
                        <span><strong v-if="password.num5 >= 0"></strong></span>
                        <span><strong v-if="password.num6 >= 0"></strong></span>
                    </div>
                    <!--<div class="forget-password" @click="getPwd">忘记密码?</div>-->
                    <div class="number-group">
                        <div class="number-btn">
                            <div @click.stop.prevent="chooseNum(1)">1</div><div @click.stop.prevent="chooseNum(2)">2</div><div @click.stop.prevent="chooseNum(3)">3</div>
                        </div>
                        <div class="number-btn">
                            <div @click.stop.prevent="chooseNum(4)">4</div><div @click.stop.prevent="chooseNum(5)">5</div><div @click.stop.prevent="chooseNum(6)">6</div>
                        </div>
                        <div class="number-btn">
                            <div @click.stop.prevent="chooseNum(7)">7</div><div @click.stop.prevent="chooseNum(8)">8</div><div @click.stop.prevent="chooseNum(9)">9</div>
                        </div>
                        <div class="number-btn">
                            <div class="no-num"></div><div @click.stop.prevent="chooseNum(0)">0</div><div class="no-num" @click.stop.prevent="deletePwd"><img src="~assets/images/del.png" /></div>
                        </div>
                    </div>
                    <div class="pay-loading" v-show="showPayLoading">
                        <div class="paying">
                            <img src="~assets/images/paying.gif" />
                            <span>正在验证</span>
                        </div>
                    </div>
                </div>
                <div class="general-height id-check" :class="{'adjust-bottom': showAdjust}" v-if="showIdCheck">
                    <h3 class="title check-title">输入短信验证码</h3><!--  <img @click.stop.prevent="close" src="~assets/images/close.png" />身份验证 -->
                    <div class="check-content">
                        <p>需要通过绑定的手机 {{starPhone}}</p>
                        <p>进行身份验证以确保账户的资金安全</p>
                        <div class="sms-input">
                            <input placeholder="请输入接收到的验证码" type="number" v-model="verificationCode" /><span @click.stop.prevent="getVerifyCode" style="background:rgba(23,62,143,1);" v-if="showFlag">发送验证码</span><span v-else>重新发送 {{countdown}}s</span>
                        </div>
                        <h4 @click.stop.prevent="finishVerification" class="finish-btn" :class="{'success': verificationCode.length == 4}">完成验证</h4>
                    </div>
                </div>
                <transition>
                    <div class="general-height shopping-detail" v-if="showResult">
                        <h3 class="title">令牌出售订单发布结果</h3>
                        <div class="result">
                            <img src="~assets/images/dealer/success.png" />
                            <h3>令牌出售订单发布成功</h3>
                        </div>
                        <div class="content confirm-content">
                            <p><span>出售数量</span><strong>{{confirmDetail.number}}块</strong></p>
                            <p class="number"><span>出售单价</span><strong>{{confirmDetail.unitPrice}}USDT/块</strong></p>
                            <p class="number"><span>本单预计获得</span><strong>+{{confirmDetail.total}}USDT</strong></p>
                            <p><span>订单号</span><strong>{{confirmDetail.orderNo}}</strong></p>
                        </div>
                        <div class="pay-btn">
                            <p @click.stop.prevent="goBackToTokenSell">完成</p>
                        </div>
                    </div>
                </transition>
            </div>
        </div>
    </div>


</template>

<script>
  import md5 from 'js-md5';
  import 'common/js/gt';
  import {checkAgentPayPassword, issueTokenOrder, issueOrderInfo, idleTokenNum, tokenGeetestInit, tokenGetCode } from 'api/register'
  export default {
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        let uid = to.query.uid;
        let token = to.query.token;
        let phone = to.query.phone;
        let area = to.query.area;
        // console.log(to.query);
        // console.log(uid, token);
        vm.uid = uid;
        vm.token = token;

        vm.area = area;
        vm.phone = phone;
        vm.starPhone = phone.substr(0, 3) + '****' + phone.substr(7);
        vm.setNormalStatus();
        vm.getIdleTokenNum();
      })

    },
    data () {
      return {
        isIOS: false,
        showAdjust: false,
        area: 86,
        phone: '',
        starPhone: '',
        idleNum: 0,
        type: 0,
        uid: '',
        token: '',
        status: 1,
        sellNum: 1,
        sellPrice: 40,
        minPrice: 40,
        showMask: false,
        showPay: false,
        showIdCheck: false,
        showResult: false,
        confirmDetail: {
          number: 1,
          unitPrice: 2232,
          total: 2232,
          orderNo: '2019102100008'
        },
        payPassword: '',
        payPwd: '',
        password: {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        },
        showPayLoading: false,
        showFlag: true,
        verificationCode: '',
        countdown: 60,
        phoneNumber: '',
        payStatus: 1,
        captchaObj: '',
        u: '',
        need_code: 1,
        scene: 'tokenSale'
      }
    },
    beforeCreate() {

    },
    created () {

    },
    mounted() {
      let u = navigator.userAgent;
      // console.log(u);
      this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      // console.log(this.isIOS);
      const h = document.body.scrollHeight;
      // console.log(h);
      if (this.isIOS) {
        document.body.addEventListener('focusin', () => {
          this.showAdjust = true;
        })
          document.body.addEventListener('focusout', () => {
            this.showAdjust = false;
        })
      } else {
        window.onresize = function() {
          if (document.body.scrollHeight < h) {
            this.showAdjust = true;
          } else {
            this.showAdjust = false;
          }
        }
      }


      this.getRegister_ini();
      /*const H = window.innerHeight;
      window.addEventListener('resize', () => {
        if (window.screen.availHeight < H) {
          this.showAdjust = true;
        } else {
          this.showAdjust = false;
        }
      })*/
    },
    watch: {
      'password.num6': {
        handler(newVal, oldVal) {
          if (newVal >= 0 && this.payPwd.length == 6) {
            // console.log(this.payPwd);
            this.payPassword = md5(this.payPwd);
            // console.log(this.payPassword);
            setTimeout(() => {
              this.verifyPayPassword();
            }, 50);
          }
        },
        immediate: true,
        deep: true
      }
    },
    beforeDestroy() {
      let codeIntervalCountdown = window['codeIntervalCountdown'];
      clearInterval(codeIntervalCountdown);
      window['codeIntervalCountdown'] = null;
    },
    methods: {
      startCountDown() {
        this.showFlag = false;
        let codeIntervalCountdown = window['codeIntervalCountdown'];
        if (codeIntervalCountdown) {
          clearInterval(codeIntervalCountdown);
          window['codeIntervalCountdown'] = null;
        }
        window['codeIntervalCountdown'] = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            this.cancelCodeIntervalCountdown();
            this.countdown = 60;
            this.showFlag = true;
          }
        }, 1000);
      },
      cancelCodeIntervalCountdown() {
        let codeIntervalCountdown = window['codeIntervalCountdown'];
        clearInterval(codeIntervalCountdown);
        window['codeIntervalCountdown'] = null;
      },
      setNormalStatus() {
        this.sellNum = 1;
        this.sellPrice = 40;
        this.payStatus = 1;
        this.showMask = false;
        this.showPay = false;
        this.showPayLoading = false;
        this.showIdCheck = false;
        this.showResult = false;
        this.payPassword = '';
        this.payPwd = '';
        this.password = {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        };
        this.showFlag = true;
        this.verificationCode = '';
        this.countdown = 60;
      },
      getQueryVariable(variable) {
        let query = window.location.href.split('?')[1];
        let vars = query.split('&');
        for (let i = 0; i < vars.length; i++) {
          let pair = vars[i].split('=');
          if (pair[0] == variable) {
            return pair[1];
          }
        }
      },
      getIdleTokenNum() {
        idleTokenNum().then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            this.idleNum = data.data.haveNum;
          }
        }).catch((err) => {
          this.showToast(err.info, 'warn');
        })
      },
      confirmToSubmit() {
        let reg = /^[0-9]+$/;
        if (this.sellNum <= 0 || !reg.test(this.sellNum) || this.sellNum > this.idleNum) {
          this.showToast('出售数量应为正整数,且不能超过自有闲置令牌数!', 'warn');
          return;
        }
        if (this.sellPrice < 40 || !this.isRealNum(this.sellPrice)) {
          this.showToast('请输入合适的出售单价，小数点后保留2位!', 'warn');
          return;
        }
        this.showMask = true;
        this.showPay = true;

      },
      goBackToTokenSell() {
        this.showMask = false;
        this.showResult = false;
        this.showFlag = true;
        this.cancelCodeIntervalCountdown();
        this.countdown = 60;
        setTimeout(() => {
          this.$router.back();
        }, 50)
      },
      isRealNum(val) {

        if (val === '' || val == null) {
          return false;
        }
        let reg = /^([1-9][0-9]*)+(.[0-9]{1,2})?$/;
        if (reg.test(val)) {
          return true;
        } else {
          return false;
        }

      },
      getRegister_ini() {
        // this.isGetCoding = false;
        return tokenGeetestInit().then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            this.startGeetest(data);
          }
        })
      },
      startGeetest(data) {
        // console.log(data);
        initGeetest({
          // 以下配置参数来自服务端 SDK
          gt: data.data.gt,
          challenge: data.data.challenge,
          offline: !data.data.success,
          product: 'bind',
          new_captcha: true
        }, (captchaObj) => {
          // console.log('111' + captchaObj)
          this.captchaObj = captchaObj;
          // captchaObj.onReady(this.captchaReady).onSuccess(this.captchaSuccess);
          captchaObj.onSuccess(this.captchaSuccess);
        })
      },
      captchaReady() {
        this.captchaObj.verify();
      },
      captchaSuccess() {
        if (this.isGetCoding) {
          return;
        }
        this.isGetCoding = true;
        let result = this.captchaObj.getValidate();

        let postData = Object.assign({
          scene: this.scene,
          area: this.area,
          mobile: this.phone
        }, result);
        tokenGetCode(postData).then((data) => {
          // console.log(data);
          this.startCountDown();
          this.isGetCoding = false;
          // this.captchaObj = null;
        }).catch((err) => {
          this.isGetCoding = false;
          this.showToast(err.info, 'warn');

          /*let me = this;
          this.showToast(err.info, 'warn');*/
          // this.captchaObj = null;
        })
      },
      /*startCountDown() {
        this.showFlag = false;
        let time = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            clearInterval(time);
            this.showFlag = true;
            this.countdown = 60;
          }
        }, 1000);
      },*/
      getVerifyCode() {
        if (!this.captchaObj) {
          this.getRegister_ini().catch(e => {
            // this.isGetCoding = false;
            this.showToast(error.info, 'warn');
          })
          return;
        }
        /*if (this.isGetCoding) {
          return;
        }*/
        this.captchaObj.verify();
      },
      verifyPayPassword() {
        this.showPayLoading = true;
        checkAgentPayPassword({uid: this.uid, password: this.payPassword, scene: this.scene}).then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            this.u = data.data.u;
            this.need_code = data.data.need_code;
            if (this.need_code == 1) {
              setTimeout(() => {
                this.showPayLoading = false;
                this.showPay = false;
                this.showIdCheck = true;
                /*this.showMask = false;
                this.commitOfficialApplication();*/
              }, 500);
            } else if (this.need_code == 0) {
              setTimeout(() => {
                this.showPayLoading = false;
                this.showPay = false;
                this.finishVerification();
              }, 500);
            }
            /*setTimeout(() => {
              const toast = this.$createToast({
                time: 1000,
                txt: '支付密码验证成功',
                type: 'correct'
              });
              toast.show();
            }, 300);*/

          }
        }).catch((error) => {
          // console.log(error);
          if (error.status && error.status != 1) {
            setTimeout(() => {
              this.showToast(error.info, 'warn');
            }, 500)
          }
          setTimeout(() => {
            this.showPayLoading = false;
          }, 500)
        })
        /*验证支付密码成功或者失败后将当前已经输入的支付密码清空*/
        this.password = {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        };
        this.payPwd = '';
        this.payPassword = '';
      },
      finishVerification() {
        if (this.need_code == 1) {
          if (this.verificationCode == '') {
            this.showToast('请输入短信验证码', 'warn');
            return;
          }
        }
        if (this.isSubmiting) {
          return;
        }
        let postData;
        if (this.need_code == 1) {
          postData = {
            num: this.sellNum,
            unitPrice: this.sellPrice,
            code: this.verificationCode,
            u: this.u
          };
        } else {
          postData = {
            num: this.sellNum,
            unitPrice: this.sellPrice,
            code: '',
            u: this.u
          };
        }
        this.isSubmiting = true;
        issueTokenOrder(postData).then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            this.isSubmiting = false;
            this.confirmDetail = {
              number: this.sellNum,
              unitPrice: this.sellPrice,
              total: Number(this.sellNum * this.sellPrice).toFixed(2),
              orderNo: data.data.orderNo
            };
            this.getIdleTokenNum();
            this.showIdCheck = false;
            this.showResult = true;
            this.payStatus = 2;
            this.showFlag = true;
            this.cancelCodeIntervalCountdown();
            this.countdown = 60;
          }
        }).catch((err) => {
            this.isSubmiting = false;
            if (this.need_code == 0) {
              this.showMask = false;
            }
            this.showToast(err.info, 'warn');
        });
      },
      chooseNum(val) {
        // console.log(this.payPwd.length);
        if (this.payPwd.length == 0) {
          this.password.num1 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 1) {
          this.password.num2 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 2) {
          this.password.num3 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 3) {
          this.password.num4 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 4) {
          this.password.num5 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 5) {
          this.password.num6 = val;
          this.payPwd += val;
        }
        // console.log(this.payPwd);
      },
      deletePwd() {
        // console.log(this.payPwd.length);
        if (this.payPwd.length == 0) {
          return;
        } else if (this.payPwd.length == 1) {
          this.password.num1 = -1;
          this.payPwd = '';
        } else if (this.payPwd.length == 2) {
          this.password.num2 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 3) {
          this.password.num3 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 4) {
          this.password.num4 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 5) {
          this.password.num5 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 6) {
          this.password.num6 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        }
        // console.log(this.payPwd);
      },

      closeMask(ev) {
        if (!this.$refs.maskContent.contains(ev.target)) {
          if (this.payStatus == 1) {
            this.showMask = false;
            this.showPay = false;
            this.showIdCheck = false;
            this.showResult = false;
          } else if (this.payStatus == 2) {
            return;
          }
          /*if (this.payStatus == 2) {
            this.payStatus = 1;  //  payStatus:1,表示当前处于选择不同会员经销商，payStatus:2，表示当前处于支付弹框状态
            this.showPay = false;
          }*/
          /*关闭弹框时将当前已经输入的支付密码清空*/
          this.password = {
            num1: -1,
            num2: -1,
            num3: -1,
            num4: -1,
            num5: -1,
            num6: -1
          };
          this.payPwd = '';
          this.payPassword = '';
          this.showFlag = true;
          this.cancelCodeIntervalCountdown();
          this.countdown = 60;
        }


      },
      showToast(msg, type) {
        const toast = this.$createToast({
          time: 2000,
          txt: msg,
          type: type
        });
        toast.show();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '~common/scss/index.scss';
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  $color: #5A99FF;
  body {
    height: 100%;
    background: #F5F5FB;
  }
  .page {
    height: 100%;
    width: 100%;
    background: #F5F5FB;
    overflow: hidden;
  }
  .intro-wrapper{
    height:calc(100% - 88px);
    overflow-y:auto;
  }
  .whole-height{
    height:100%;
  }

  .issue-order-wrapper{
    padding:30px;
    .content{
      padding-top:26px;
      padding-bottom: 125px;
      background:#fff;
      box-shadow:0 2px 4px 0 rgba(10,29,87,0.3);
      border-radius:10px;
      text-align:center;
      h3{
        margin:0 0 22px;
        color:#71768C;
        font-size:26px;
        line-height:1.5;
      }
      h2{
        font-size:32px;
        color:#202C5B;
      }
      .input-area{
        display:flex;
        align-items:center;
        padding:0 32px;
        margin-top:30px;
        text-align:left;
        strong{
          flex:0.5;
          white-space:nowrap;
          font-size:32px;
          color:#202C5B;
        }
        input{
          flex:1;
          width:310px;
          margin:0 48px;
          padding:29px 0 29px 15px;
          outline:none;
          background:rgba(248,248,248,1);
          border:1px solid rgba(23,62,143,1);
          border-radius:8px;
        }
        span{
          flex:0.5;
          font-size:36px;
          color:#202C5B;
        }
      }
      p{
        margin:24px 0 87px;
        font-size:26px;
        color:#71768C;
        span{
          color:#EB3257;
        }
      }
      h4{
        margin-bottom:50px;
        font-size:26px;
        color:#202C5B;
      }
      h1{

        font-weight:600;
        font-size:30px;
        color:#202C5B;
        span{
          font-size:72px;
        }
      }
    }
    .warm-notice{
      margin-top:102px;
      text-align:center;
      font-size:26px;
      color:#71768C;
      p{
        line-height:1.6;
        span{
          color:#EB3257;
        }
      }
    }
  }



  .application-wrapper{
    display:flex;
    height:98px;
    line-height:98px;
    align-items:center;
    p{
      width:100%;
      height:88px;
      line-height:88px;
      font-size:34px;
      cursor:pointer;
      text-align:center;
      color:#FFF;
      background:#173E8F;
    }
  }

  .img-responsive{
    display:block;
    max-width:100%;
    height:auto;
  }
  .center-block{
    display:block;
    margin:0 auto;
  }

  .not-whole-width{
    width:85.92%;
    margin-bottom:-18px;
  }


  .cube-scroll-wrapper{
    background:transparent!important;
  }
  .cube-popup .cube-popup-mask{
    opacity:0.5;
    background-color:#000;
  }

  .mask{
    position:fixed;
    z-index:9991;
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0, 0, 0, 0.5);

    .general-height{
      /*height: 500px;*/
      height: 67.46vh;
      background:rgba(255,255,255,1);
    }
    .special-height{
      height: 63.46vh;
      background:rgba(255,255,255,1);
    }
    .title{
      position:relative;
      padding:29px 0 28px;
      font-size:34px;
      border-bottom:1px solid rgba(245,245,245,1);
      color:#202C5B;
      text-align:center;
      img{
        position:absolute;
        left:30px;
        top:27px;
        width:20px;
        height:34px;
      }
    }
    .number-group{
      position:absolute;
      z-index:9992;
      bottom:0;
      left:0;
      right:0;
      height:448px;
      >div:first-child{
        border-top:1px solid rgba(245,245,245,1);
      }
      .number-btn{
        display:flex;
        div{
          flex:1;
          height:111px;
          line-height:111px;
          font-size:50px;
          color:#333;
          text-align:center;
          border-bottom:1px solid rgba(245,245,245,1);
          border-right:1px solid rgba(245,245,245,1);
          -webkit-tap-highlight-color:rgba(0,0,0,0.15);
        }
        div:active{
          background:rgba(0,0,0,0.15);
        }
        div:last-child{
          border-right:none;
        }
        .no-num{
          background:#e3e7ee;
          img{
            width:44px;
            height:32px;
            display:block;
            margin:40px auto;
          }
        }
      }
    }
    .shopping-detail{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;

      .content{
        margin:97px 30px 0;
        h2{
          margin-bottom:66px;
          text-align:center;
          font-size:30px;
          color:#202C5B;
          font-weight:600;
          span{
            font-size:72px;
          }
        }
        p{
          display:flex;
          justify-content:space-between;
          font-size:28px;
          padding-bottom:29px;
          border-bottom:1px solid #ececec;
          span{
            color:#71768C;
          }
          strong{
            color:#202C5B;
          }
          input{
            width:250px;
            height:84px;
            text-indent:15px;
            background:rgba(248,248,248,1);
            border:1px solid rgba(23,62,143,1);
            border-radius:6px;
          }
        }
        p:last-child{
          margin-top:30px;
        }
        h4{
          font-size:28px;
          text-align:center;
          color:#71768C;
          span{
            color:#EB3257;
          }
        }
      }
      .confirm-content{
        margin:32px 30px 0;
        h1{
          margin-bottom:47px;
          font-size:28px;
          color:#71768C;
          text-align:center;
          span{
            color:#EB3257;
          }
        }
        h3{
          margin-bottom:38px;
          font-size:28px;
          color:#202C5B;
          text-align:center;
        }
        .number{
          margin-top:30px;
        }
        .buy-back{
          margin-bottom:52px;
          align-items:center;
        }
      }
      .official-content{
        p{
          padding-bottom:52px;
          align-items:center;
          border-bottom:none;
        }
      }
      .result{
        /*margin-top:97px;*/
        margin-top:45px;
        text-align:center;
        img{
          width:80px;
          height:80px;
          margin-bottom:41px;
        }
        h3{
          margin-bottom:60px;
          font-size:28px;
          color:#202C5B;
        }
        p{
          font-size:28px;
          color:#71768C;
        }
      }
      .pay-btn{
        position:absolute;
        bottom:30px;
        height:84px;
        line-height:84px;
        text-align:center;
        background:rgba(23,62,143,1);
        border-radius:8px;
        color:#fff;
        width:calc(100% - 60px);
        margin:0 30px;
        font-size:34px;
      }
    }
    .pay-password{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .password-wrapper{
        display:flex;
        margin:43px 30px 0;
        height:88px;
        line-height:88px;
        border:1px solid rgba(209,209,209,1);
        border-radius:10px;
        span{
          flex:1;
          text-align:center;
          border-right:1px solid rgba(209,209,209,1);
          strong{
            display:block;
            width:20px;
            height:20px;
            border-radius:50%;
            background:#333;
            margin:34px auto;
          }
        }
        span:last-child{
          border-right:none;
        }
      }
      .forget-password{
        color:#1253FC;
        width:25%;
        padding:12px 0;
        margin:12px auto 0;
        text-align:center;
        font-size:28px;
      }
      .pay-loading{
        position:absolute;
        z-index:9993;
        bottom:0;
        left:0;
        right:0;
        height:calc(100% - 70px);
        background:#fff;
        .paying{
          position:absolute;
          left:50%;
          top:50%;
          transform:translate(-50%, -50%);
          text-align:center;
          font-size:30px;
          color:#4B74E8;
          img{
            display:block;
            width:40px;
            height:40px;
            margin:0 auto 15px;
          }
        }
      }

    }
    .id-check{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .check-title{
        position:relative;
        img{
          position:absolute;
          left:30px;
          top:29px;
          width:34px;
          height:34px;
        }
      }
      .check-content{
        margin-top:32px;
        padding:0 30px;
        p{
          text-align:center;
          color:#202C5B;
          font-size:26px;
          line-height:1.5;
        }
        .sms-input{
          height:84px;
          line-height:84px;
          margin-top:28px;
          input{
            display:inline-block;
            height:84px;
            line-height:84px;
            width:59.9999%;
            text-indent:22px;
            font-size:30px;
            border-radius:10px 0 0 10px;
            border:1px solid rgba(227,227,227,1);
            border-right:none;
            box-shadow:0 0 0 rgba(0,0,0,0);
            -webkit-appearance:none;
            outline:none;
            background:#F6F7F8;
          }
          span{
            display:inline-block;
            width:39.9999%;
            height:84px;
            line-height:84px;
            border-radius:0 10px 10px 0;
            vertical-align:top;
            background:#D1D1D1;
            color:#fff;
            font-size:30px;
            text-align:center;
            /*border:1px solid rgba(227,227,227,1);
            border-left:none;*/
          }
        }
        .finish-btn{
          height:84px;
          line-height:84px;
          margin-top:32px;
          text-align:center;
          color:#fff;
          font-size:34px;
          border-radius:8px;
          background:rgba(23,62,143,0.5);
        }
        .success{
          background:rgba(23,62,143,1);
        }
      }
    }
    .adjust-bottom{
      bottom:-15px!important;
    }
  }
  .fixed-position{
    position:fixed;
  }
  .static-position{
    position:absolute;
  }

  .fade-enter-active, .fade-leave-active{
    /*opacity:1;
    background: rgba(7, 17, 27, 0.8);*/
    transition: all 0.5s;
    transform:translate(0, 0);
  }
  .fade-enter, .fade-leave-active{
    /*opacity:0;
    background:rgba(7, 17, 27, 0);*/
    transform: translate(0, 100%);
  }




  input::-webkit-input-placeholder { /* WebKit browsers*/
    color: #B7C3D1;
    font-size:26px;
  }















</style>
<style>
  .cube-toast-tip{
    /*max-width:13em;*/
    font-size:28px;
    max-width:15.5em;
    max-height:6em;
    line-height:40px;
  }
  .cube-toast.cube-popup {
    z-index: 10000!important;
  }
</style>
